<template>
       <div class="counterModule">
        <slot name="top"/>

        <button class="addBtn" :disabled="n>=max" @click="addClick">+</button><span class="coumt" ><slot/>{{n}}</span><button :disabled="n<=min" @click="deleteClick"  class="deleteBtn">-</button>
        <slot name="bottom"/>
        </div>
</template>

<script>
    export default {
        props:{
            value:{typeof:String,default:3},   //default设置默认值  不建议直接对他修改 能在data中赋值用
            min:{typeof:String},
            max:{typeof:String},
            step:{typeof:String,required:true}
        }, 
        data() {
            return {
                n:this.value,
                add:this.step
            }
        }, 
        methods: {
            addClick() {
                for(let i =0;i<this.add;i++){
                this.n++
            }
            },
            deleteClick(){
                for(let i =0;i<this.add;i++){
                this.n--
            }

            }
        },
    }
</script>

<style lang="scss" scoped>
    .counterModule{
        width: 180px;
        display: flex;
        margin: 0 auto;
        align-content: center;
        justify-content: space-between;
        border: 1px solid rgb(61, 61, 61);
        .addBtn,.deleteBtn{
            width: 30px;
        }
    }
</style>